<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="js/common.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/jquery/jquery.comment.js"></script>
    <script>
        var arr;
        $(function () {
            //得到请求头中的参数,发送ajax,得到数据,渲染
            var params = getParams();
            var id = params.id;
            var userId;
            $.get("/travels/" + id, function (data) {
                userId = data.author.id;
                var person = data.person;
                var $person = $('#person');
                if (person == 1) {
                    $person.html("一个人的旅行");
                } else if (person = 2) {
                    $person.html("和父母");
                } else if (person = 3) {
                    $person.html("和朋友");
                } else if (person = 4) {
                    $person.html("和同事");
                } else if (person = 5) {
                    $person.html("和爱人");
                } else if (person = 6) {
                    $person.html("和其他");
                }
                $('.travels').renderValues(data);

                //查询是否关注
                $.get("/attention/" + userId, function (data) {
                    if (data) {
                        $('#followBtn').html('');
                        $('#followBtn').html('已关注');
                    } else {
                        $('#followBtn').html('');
                        $('#followBtn').html('关注');
                    }
                })
            })
            $('#followBtn').click(function () {
                console.log(userId);
                $.post("/attention/", {userGetId: userId}, function (data) {
                    if (data.data) {//用来区分 登录
                        window.location.reload();
                    }
                })
            })

            //点赞操作
            $("#likeBtn").click(function () {
                $.post('/greats', {travelId: id}, function (data) {
                    if (!data.success) {
                        $(document).dialog({
                            type: 'confirm',
                            style: 'IOS',
                            titleText: data.msg,
                            content: '是否马上登陆',
                            buttons: [
                                {
                                    name: '登陆',
                                    callback: function () {
                                        window.parent.location.href = "/login.html";
                                    }
                                }, {
                                    name: '返回',
                                    callback: function () {
                                        $("#likeBtn").toggleClass('cs')
                                    }
                                }
                            ]
                        });
                    }
                })
            })
            //回显点赞的功能
            //得到user id , 发送ajax,查询出来是否有点检记录,如果存在就是回显点赞图片
            var user = window.sessionStorage.getItem("user");
            if (user) {
                $.get("/greats/" + id, function (data) {
                    //如果点赞记录的对象存在,说明点过赞,就增加点赞的样式
                    if (data) {
                        $("#likeBtn").toggleClass('cs');
                    }
                })

            }

            //评论---------------------------------------------------
            /*
                评论数据的回显
             */
            $.ajax({
                type: "GET",
                url: "/travels/"+id+"/comments",
                success: function(data){
                    console.log(data);
                    arr = data;
                },
                async: false
            });
            console.log(arr);
            $(".comment-list").addCommentList({data:arr,add:""});

            /**
             * 提交评论
             */
            $("#comment").click(function(){

                if(window.sessionStorage.getItem("user")) {
                    //渲染
                    var obj = new Object();
                    var user = window.sessionStorage.getItem("user");
                    obj.img = JSON.parse(user).headImgUrl;
                    obj.replyName = JSON.parse(user).nickName;
                    obj.content = $("#content").val();
                    obj.replyBody = "";
                    $(".comment-list").addCommentList({data: [], add: obj});
                    //保存评论到数据库
                    $.post("/travelComments",{"travel.id":id,content:$("#content").val()},function (data) {
                        console.log(data);
                        if(data.success){
                            $(document).dialog({
                                style:'IOS',
                                titleShow: false,
                                content: '评论成功'
                            });
                            $("#content").val("")
                        }
                    })
                }else {
                    $(document).dialog({
                        type : 'confirm',
                        style: 'IOS',
                        titleText: "您未登陆",
                        content: '是否马上登陆',
                        buttons: [
                            {
                                name: '登陆',
                                callback: function() {
                                    window.parent.location.href="/login.html";
                                }
                            }, {
                                name: '返回',
                                callback: function() {
                                    $('#followBtn').html('关注');
                                }
                            }
                        ]
                    });
                }
            });
            //end--------------------------------------------------------

            //发送保存回复评论的数据
            $("#replyBtn").click(function(){
                if(window.sessionStorage.getItem("user")) {
                    //保存评论到数据库
                    $.post("/travelComments",{"travel.id":id,content:$("#content").val()},function (data) {
                        if(data.success){
                            $(document).dialog({
                                style:'IOS',
                                titleShow: false,
                                content: '评论成功'
                            });
                            $("#content").val("")
                        }
                    })
                }else {
                    $(document).dialog({
                        type : 'confirm',
                        style: 'IOS',
                        titleText: "您未登陆",
                        content: '是否马上登陆',
                        buttons: [
                            {
                                name: '登陆',
                                callback: function() {
                                    window.parent.location.href="/login.html";
                                }
                            }, {
                                name: '返回',
                                callback: function () {

                                }
                            }
                        ]
                    });
                }
            });
            //回显收藏
            if(user){
                $.get("/travels/get",{travelId:id},function (data) {
                    if(data.success){
                        $("#collectBtn").toggleClass('cc');
                    }
                })
            }




            //收藏
            $("#collectBtn").click(function () {
               $.post('/travels/collect',{travelId:id},function (data) {


                    if(!data.success){
                        $(document).dialog({
                            type : 'confirm',
                            style: 'IOS',
                            titleText: data.msg,
                            content: '是否马上登陆',
                            buttons: [
                                {
                                    name: '登陆',
                                    callback: function() {
                                        window.parent.location.href="/login.html";
                                    }
                                }, {
                                    name: '返回',
                                    callback: function() {
                                        $("#collectBtn").toggleClass('cc');
                                    }
                                }
                            ]
                        });

                    }

                })


            })

        })




        //点赞的图标

            //点赞的图标
        $(function () {
            $(".like").click(function () {
                $(this).toggleClass('cs');
            })

        })

        $(function () {
            //得到请求头中的参数,发送ajax,得到数据,渲染
            var params = getParams();
            var id = params.id;//被关注者的id
            $('#followBtn').click(function () {
                $.get('/attention', function (data) {
                    if (!data.success) {
                        $(document).dialog({
                            type: 'confirm',
                            style: 'IOS',
                            titleText: data.msg,
                            content: '是否马上登陆',
                            buttons: [
                                {
                                    name: '登陆',
                                    callback: function () {
                                        window.parent.location.href = "/login.html";
                                    }
                                }, {
                                    name: '返回',
                                    callback: function () {
                                        window.location.reload();
                                    }
                                }
                            ]
                        });
                    } else {

                    }
                })
            })

        })

        $(function () {

            $(".collect").click(function () {
                $(this).toggleClass('cc');
            })

        })
        $(function () {
            $(".comment").click(function () {
                $(this).toggleClass('cn');
            })

        })

    </script>
    <style>
        .like{ font-size:20px;  color:#ccc; cursor:pointer;}
        .cs{color:#f00;}
        .collect{ font-size:20px;  color:#ccc; cursor:pointer;}
        .cc{color: gold;}
        .comment { font-size:20px;  color:#ccc; cursor:pointer;}
        .cn{color: green;}
        .like {
            font-size: 20px;
            color: #ccc;
            cursor: pointer;
        }

        .cs {
            color: #f00;
        }
    </style>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <!--<input class="p" type="button" id="followBtn" />-->
                    <button id="followBtn"> 关注</button>
                    <br>
                    粉丝: <span render-html="author.fans"></span>个
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="createTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span id="person"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>
        <div class="content" render-html="travelContent.content">
        </div>
    </div>

    <hr>




    <div class="container d-flex " id="btn">
        <div class="p-2  flex-fill">
            <!-- <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>-->
            <p class="like" id="likeBtn">&#10084;</p>
        </div>


        <div class="p-2  flex-fill"><i class="fa   comment fa-commenting"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa collect fa-star" id="collectBtn"> </i>
        </div>
    </div>
    <script>
        $(function () {


            var content;
            $("#commentBtn").click(function () {
                if ($("#commentDiv").css("display")=="none"){
                    $("#commentDiv").css("display","block")
                }else {
                    $("#commentDiv").css("display","none")
                }
            })
        })
    </script>

    <div class="container" id="commentDiv" style="display: none">
        <div class="commentbox">
            <textarea cols="60" rows="3" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
            <div class="btn btn-info pull-right" id="comment">评论</div>
        </div>
        <div class="comment-list">
    </div>

</div>
        </div>

    </div>
</div>
</body>

</html>